<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>腕带使用信息管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <script th:src="@{/plugin/jquery/jquery-3.4.1.js}" charset="utf-8"></script>
  <link rel="stylesheet" th:href="@{/plugin/layui/css/layui.css}">
  <script type="text/javascript" th:src="@{/plugin/layui/layui.js}"></script>
</head>

<body style="padding: 20px;">
  <!-- 页面结构 -->
  <div class="layui-main">
    <!-- 表格上方标题 -->
    <blockquote class="layui-elem-quote">腕带使用信息列表</blockquote>
    <!-- 模糊搜索表单 -->
    <div id="add-que-layer" style="padding: 20px">
	    <form id="add-que-form" onsubmit="return false;" class="layui-form layui-form-pane">
		  <div class="layui-form-item">
		  	<label class="layui-form-label">筛选项</label>
		    <div class="layui-input-inline" style="width: 40%;">
		    	<input type="checkbox"  name="q_check" title="状态筛选" value="1" lay-skin="primary" lay-filter="demo01"/>
		    	<input type="checkbox" name="q_check" title="时间筛选" value="2" lay-skin="primary" lay-filter="demo02"/>
		    </div>
		    <div class="layui-input-inline" style="width: 30%;">
		  		<input type="text"  id="que_condition" name="condition" placeholder="请输入搜索的关键词"
	          style="border-radius: 35px;" class="layui-input"  autocomplete="off">
		  	</div>
		    <div class="layui-input-inline">
	          <button class="layui-btn" lay-submit lay-filter="add-que-form-submit" >查&nbsp;&nbsp;询</button>
	          <button type="reset" id="reset" class="layui-btn layui-btn-primary" lay-filter="clean">清空条件</button>
	        </div>
	      </div>
	      <div class="layui-form-item" >
	        <label class="layui-form-label" id="d1" style="display: none">选择状态</label>
	        <div class="layui-input-inline" id="d2" style="display: none">
	        	<select id="query_type_id" name="query_type_id" class="select" >
					<option value="0">正在使用</option>
					<option value="1">已结算</option>
					<option value="2">已挂失</option>
					<option value="3">已删除</option>
					<option value="4">强制结算</option>
				</select>
	        </div>
	        <label class="layui-form-label" id="d3" style="display: none">选择开始时间</label>
	        <div class="layui-input-inline"  id="d4" style="display: none">
	        	<input type="text" class="layui-input" id="start"  placeholder="选择开始时间"/>
	        </div>
	        <label class="layui-form-label" id="d5" style="display: none">选择结束时间</label>
	        <div class="layui-input-inline" id="d6" style="display: none">
	        	<input type="text" class="layui-input" id="end"  placeholder="选择结束时间"/>
	        </div>
		  </div>
	    </form>
  	</div>
  	<!-- 模糊搜索表单结束 -->
  	 <a class="layui-btn layui-btn-sm layui-btn-danger"  id="deleteList" lay-event="">删除选中</a>
    <!--腕带使用信息表 -->
    <table id="mi-tbl" lay-filter="mi-tbl"></table>
	
    <script type="text/html" id="mi-tbl-toolbar">
      <a class="layui-btn layui-btn-xs" lay-event="updateWS">编辑</a>
      <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="deleteWS">删除</a>
    </script>
  </div>
  
  
  <!-- 更新腕带使用信息弹出层 -->
  <div id="update-mi-layer" style="display: none; padding: 20px">
    <form id="update-mi-form" class="layui-form layui-form-pane" lay-filter="update-mi-form">
      <div class="layui-form-item" >
        <label class="layui-form-label">序号</label>
        <div class="layui-input-block">
          <input type="text" name="info_id" id="up_info_id" class="layui-input" readonly>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">腕带印刷号</label>
        <div class="layui-input-block">
          <input type="text" name="wriststrp_id" id="up_wriststrp_id" class="layui-input" lay-verify="required" autocomplete="off" >
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">腕带状态</label>
	    <div class="layui-input-inline">
			<select id="up_info_state" name="info_state" class="select">
				<option value="0">正在使用</option>
				<option value="1">已结算</option>
				<option value="2">已挂失</option>
				<option value="3">已删除</option>
				<option value="4">强制结算</option>
			</select>
	    </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">余额</label>
        <div class="layui-input-block">
          <input type="text" name="balance" id="up_balance" class="layui-input"  lay-verify="required|number" autocomplete="off" >
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">顾客姓名</label>
        <div class="layui-input-block">
          <input type="text" name="customer_name" id="up_customer_name"  class="layui-input" readonly lay-verify="required" autocomplete="off" >
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">员工工号</label>
        <div class="layui-input-block">
          <input type="text" name="operater_id" id="up_operater_id" class="layui-input" readonly lay-verify="required" autocomplete="off" >
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">POS机编号</label>
        <div class="layui-input-block">
          <input type="text" name="pos_id" id="up_pos_id"  class="layui-input" readonly lay-verify="required" autocomplete="off" >
        </div>
      </div>
      
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="update-mi-form-submit">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </div>
  <!-- 页面JS -->
  <script>
    layui.use(['jquery', 'table', 'layer', 'form','laydate'], function() {
      // 加载layui模块，使用其推荐的【预先加载】方式，详见官网【模块规范】一节
      var $ = layui.$;
      var table = layui.table;
      var layer = layui.layer;
      var form = layui.form;
      var laydate = layui.laydate;
      
      // 为日历插件赋值
      laydate.render({
      	elem: '#start' //指定元素
  	  });
      laydate.render({
      	elem: '#end' //指定元素
      });
      
      // 监听复选框事件1
      form.on('checkbox(demo01)', function(data){
    	if(data.elem.checked){// 是否被选中
    		$("#d1").css("display","block");
        	$("#d2").css("display","block");
    	}else{
    		$("#d1").css("display","none");
        	$("#d2").css("display","none");
    	}
    	
      });   
   // 监听复选框事件2
      form.on('checkbox(demo02)', function(data){
    	if(data.elem.checked){// 是否被选中
      		$("#d3").css("display","block");
          	$("#d4").css("display","block");
          	$("#d5").css("display","block");
          	$("#d6").css("display","block");
      	}else{
      		$("#d3").css("display","none");
          	$("#d4").css("display","none");
          	$("#d5").css("display","none");
          	$("#d6").css("display","none");
      	}
      }); 
   
   // 显示添加腕带仓库弹出层
  	$('#deleteList').click(function(obj) {
  		// 每次显示前重置表单
  		var checkStatus = table.checkStatus('mi-tbl'); //idTest 即为基础参数 id 对应的值
  		var data = obj.data;
  		data = checkStatus.data;
  		if(data.length==0){
  			layer.msg("请至少选中一项！");
  			return;
  		}
  		var arr = new Array();
  		for(var i=0;i<data.length;i++){
  			arr[i] = data[i].info_id;
  		}
  		$.ajax({
  			url: "[[@{/manageInfo/deletelist}]]"+"?id="+arr,
  			type: "POST",
  			//contentType: 'application/json',
  			dataType: 'json',
  			success: function(data) {
  				if (data.code == 1) {
  					layer.close(layer.index);
  					layer.msg(data.msg);
  					table.reload('mi-tbl');
  				} else {
  					layer.msg(data.msg);
  				}
  			},
  			error: function() {
  				console.log("ajax error");
  			}
          });
  		
  	});
      
      // 显示所有腕带使用信息
      table.render({
        elem: '#mi-tbl',
        url: '[[@{/manageInfo/query}]]',//请求地址+'?condition='+$("#con").val()+'&type_id='+$("#cy").val()
        method: 'get',
        page:true,
        cols: [ [
          {type:'checkbox',title:"选择"},
          {field: 'info_id', title: '序号',sort:true,width:80},
          {field: 'wriststrp_id', title: '腕带编号',width:100},
          {templet:function(data){
        	  switch(data.info_state){
        	  	case 0:return "正在使用";break;
        	  	case 1:return "已结算";break;
        	  	case 2:return "已挂失";break;
        	  	case 3:return "已删除";break;
        	  	case 4:return "已强制结算";break;
        	  	default:return "状态异常";
        	  }
        	  return showDate(data.createtime);
          },title:'腕带状态',width:100},
          {field: 'balance', title: '余额',width:80},
          {templet:function(data){
        	  return showDate(data.createtime);
          },title:'创建时间',width:140},
          {templet:function(data){
        	  return showDate(data.endtime);
          },title:'结算时间',width:140},
          {templet:function(data){
        	  return data.customer.customer_name;
          },title:'顾客名称',width:100},
          {field: 'operater_id', title: '操作者工号'},
          {field: 'pos_id', title: 'POS机编号'},
          {toolbar: '#mi-tbl-toolbar', title: '操作'}
        ] ],
        // 表格容器id，用于表格重载
        id: 'mi-tbl',
      });
      
     
 // 点击搜索按钮
	form.on('submit(add-que-form-submit)', function(){
		// 判断选择情况
		var arr = new Array();
        $("input:checkbox[name='q_check']:checked").each(function(i){
        	arr[i] = $(this).val();
        });
		// 使用了时间和类型
		if(arr.includes('1')&&arr.includes('2')){
			if($("#query_type_id").val()==null){
				layer.msg("请选择搜索的类型！");
				return false;
			}else if($("#start").val()==null||$("#start").val()==''){
				layer.msg("请选择起始时间！");
				return false;
			}else if($("#end").val()==null||$("#end").val()==''){
				layer.msg("请选择结束时间！");
				return false;
			}else{
				// 重新渲染表格
			    table.reload('mi-tbl',{
			        where:{
			        	'keyWords':$("#que_condition").val(),
			        	'status':$("#query_type_id").val(),
			        	'startTime':$("#start").val(),
			        	'endTime':$("#end").val()
			        },
			        page: {
		                curr: 1 //重新从第 1 页开始
		            }
			    });
			}
		}else if(arr.includes('1')){
			if($("#query_type_id").val()==null){
				layer.msg("请选择搜索的类型！");
				return false;
			}else{
				// 重新渲染表格
			    table.reload('mi-tbl',{
			        where:{
			        	'keyWords':$("#que_condition").val(),
			        	'status':$("#query_type_id").val()
			        },
			        page: {
		                curr: 1 //重新从第 1 页开始
		            }
			    });
			}
		}else if(arr.includes('2')){
			if($("#start").val()==null||$("#start").val()==''){
				layer.msg("请选择起始时间！");
				return false;
			}else if($("#end").val()==null||$("#end").val()==''){
				layer.msg("请选择结束时间！");
				return false;
			}else{
				// 重新渲染表格
			    table.reload('mi-tbl',{
			        where:{
			        	'keyWords':$("#que_condition").val(),
			        	'startTime':$("#start").val(),
			        	'endTime':$("#end").val()
			        },
			        page: {
		                curr: 1 //重新从第 1 页开始
		            }
			    });
			}
		}else{
			// 重新渲染表格
		    table.reload('mi-tbl',{
		        where:{
		        	'keyWords':$("#que_condition").val()
		        },
		        page: {
	                curr: 1 //重新从第 1 页开始
	            }
		    });
		}
		
	 	// 阻止表单跳转
	    return false;
	});
 
	// 监听重置按钮,隐藏附加条件
	 $("#reset").on('click',function(){
		close();
		// 清除where条件
		table.reload('mi-tbl',{
			where:null,
			page: {
                curr: 1 //重新从第 1 页开始
            }
		});
		 
	 });
      
    // 监听行工具栏事件：删除腕带使用信息与更新腕带使用信息
    table.on('tool(mi-tbl)', function(obj) {
		// 获取当前行数据和lay-event的值
		var data = obj.data;
		var event = obj.event;
			
		// 删除腕带使用信息事件
		if (event === 'deleteWS') {
			layer.confirm('确定删除该腕带信息吗？', function(index) {
			// ajax方式删除腕带使用信息
			$.ajax({
				url:'[[@{/manageInfo/deleteOne}]]',
				type: "POST",
				data:{
					info_id:data.info_id	  
				},
				dataType: 'json',
				success: function(data){
					if (data.code == 1) {
						layer.msg(data.msg);
						table.reload('mi-tbl');
					} else {
						layer.msg(data.msg);
					}
				},
				error: function() {
					console.log("ajax error");
				}
				});
				layer.close(index);
			});
		}
			
		// 更新事件 修改
		if (event === 'updateWS'){
			// 每次显示更新腕带使用信息的表单前自动为表单填写该行的数据
			form.val('update-mi-form',{
				"info_id": data.info_id,
				"wriststrp_id": data.wriststrp_id,
				"info_state": data.info_state,
				"balance": data.balance,
				"customer_name": data.customer.customer_name,
				"operater_id": data.operater_id,
				"pos_id": data.pos_id,
				"state": data.state
			});
			// 显示更新腕带使用信息表单的弹出层
			layer.open({
				type: 1,
				title: '修改',
				skin: 'layui-layer-molv',
				area: ['500px'],
				content: $('#update-mi-layer')
			});
			// 更新腕带使用信息表单提交
			form.on('submit(update-mi-form-submit)',function(data) {
				// ajax方式更新腕带使用信息
				$.ajax({
					url:"[[@{/manageInfo/updateOne}]]",
					type:"POST",
					data:{
						info_id:$("#up_info_id").val(),
						wriststrp_id:$("#up_wriststrp_id").val(),
						info_state:$("#up_info_state").val(),
						balance:$("#up_balance").val(),
						pos_id:$("#up_pos_id").val()
					},
					dataType:'json',
					success:function(data) {
						if (data.code == 1) {
							layer.close(layer.index);
							layer.msg(data.msg);
							table.reload('mi-tbl');
						} else {
							layer.msg(data.msg);
						}
					},
					error: function() {
						console.log("ajax error");
					}
				});
				// 阻止表单跳转
				return false;
			}); 
		} 
		// 阻止表单跳转
	    return false;
    });
});
   /*  //更新本页所有下拉选项（腕带类型）
    function querySelect(){
        var types = "";
        	$.ajax({
	            type:"POST",
	            url:'[[@{/wriststrpType/getall}]]',  //从数据库查询所有腕带类型
	            dataType: "json",
	            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
	            async: false,
	            cache: false,
	            success: function (data) {
	            	for(var i=0;i<data.data.length;i++){
	            		types += "<option value="+data.data[i].type_id+">"+data.data[i].type_name+"</option>";
	            	}
	                $("#up_type_id").html(types); 
	                $("#add_type_id").html(types);
	            }
	           
       		});
    } */
    $(function(){
  	  // 入口函数，调用更新下拉框方法
  	  // querySelect();
  	  // 重新渲染
    });
    // 自定义时间展示函数
    function showDate(stime){
    	if(stime==null){
    		return "";
    	}
    	var date = new Date(stime);
    	var y = date.getFullYear();
    	var m = date.getMonth()+1;
    	m = M<10? ('0'+m):m;
    	var d = date.getDate();
    	d = d<10?("0"+d):d;
    	var h = date.getHours();
    	h = h<10?("0"+h):h;
    	var M = date.getMinutes();
    	M = M<10?("0"+M):M;
    	var str = y+"-"+m+"-"+d+" "+h+":"+M;
    	return str;
    }
    function close(){
    	$("#d1").css("display","none");
    	$("#d2").css("display","none");
    	$("#d3").css("display","none");
      	$("#d4").css("display","none");
      	$("#d5").css("display","none");
      	$("#d6").css("display","none");
    }
  </script>
  <script type="text/javascript">

  </script>
</body>

</html>